<template>
  <div class="todoapp">
    <headerG  :arr="list" @creat="btn"></headerG>
    <mian :arr="transit" @clic="dele"></mian>
    <foot :arr="transit" @chrean='btn11' :nmaa="getset" @clearA="clear"></foot>
  </div>
</template>

<script>
  import './styles/base.css'
  import './styles/index.css'
  import header from './components/TodoHeader.vue'
  import mian from './components/TodoMain.vue'
  import foot from './components/TodoFooter.vue'
  
export default {
  data(){
    return{
     list: 
    JSON.parse(localStorage.getItem('data')) || []
     ,
    
      getset:'all',
    
    }
  },
 components: {
  headerG:header,
  mian,
  foot
 },
 computed:{
  transit(){
    if(this.getset ==='no'){

   return  this.list.filter(itms =>!itms.isDone)

    }else if(this.getset ==='yes'){
      return this.list.filter(itms => itms.isDone)
    }else{
      return this.list
    }
  },
  
  
 },
 methods:{
  clear(){
    
  this.list =   this.list.filter(itms => !itms.isDone)
 
  },
  btn(con){
    let id = this.list.length === 0? 100:this.list.at(-1).id+1

    this.list.push({
      id,
      name:con,
      isDone:false
    })
   

  },
  dele(a){
   
   const b = this.list.findIndex(itms =>itms.id === a)
   this.list.splice(b,1)
    

  },
  btn11(a){
    this.getset = a
   
  }
 },
watch:{
  list:{
    deep:true,
    handler(){
      localStorage.setItem('data',JSON.stringify(this.list))
    }
  }
}
 
}
</script>

<style>

</style>